<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MCP Web 智能助手</title>
    <link rel="stylesheet" href="css/style.css">
    <!-- 引入marked.js用于markdown解析 -->
    <script src="https://cdn.jsdelivr.net/npm/marked@11.1.1/marked.min.js"></script>
    <!-- 引入html2canvas用于截图 -->
    <script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script>
</head>
<body>
    <div class="app-container">
        <!-- 顶部导航栏 -->
        <header class="header">
            <div class="header-content">
                <h1 class="app-title">🤖 MCP Web 智能助手</h1>
                <div class="header-actions">
                    <button id="clearChatBtn" class="btn btn-secondary">清空聊天</button>
                    <button id="shareChatBtn" class="btn btn-secondary">分享对话</button>
                    <a href="tools.html" class="btn btn-secondary">工具列表</a>
                    <div class="status-indicator">
                        <span id="connectionStatus" class="status-dot offline"></span>
                        <span id="connectionText">离线</span>
                    </div>
                </div>
            </div>
        </header>

        <!-- 主聊天区域 -->
        <main class="chat-container">
            <!-- 聊天消息区域 -->
            <div class="chat-messages" id="chatMessages">
                <div class="welcome-message">
                    <div class="welcome-icon">🚀</div>
                    <h2>欢迎使用 MCP Web 智能助手</h2>
                    <p>我可以帮助您调用各种 MCP 工具来完成任务</p>
                    <p>请在下方输入您的问题开始对话...</p>
                </div>
            </div>

            <!-- 输入区域 -->
            <div class="chat-input-container">
                <div class="chat-input-wrapper">
                    <textarea 
                        id="messageInput" 
                        placeholder="请输入您的问题..." 
                        rows="1"
                        maxlength="2000"
                    ></textarea>
                    <button id="sendBtn" class="send-btn" disabled>
                        <span class="send-icon">📤</span>
                    </button>
                </div>
                <div class="input-hint">
                    按 Enter 发送，Shift + Enter 换行 | <span id="charCount">0</span>/2000
                </div>
            </div>
        </main>
    </div>

    <!-- 加载遮罩 -->
    <div id="loadingOverlay" class="loading-overlay">
        <div class="loading-spinner"></div>
        <div class="loading-text">正在连接服务器...</div>
    </div>

    <!-- JavaScript -->
    <script src="js/config.js"></script>
    <script src="js/ws.js"></script>
    <script src="js/chat/thinking-flow.js"></script>
    <script src="js/chat/share-module.js"></script>
    <script src="js/chat.js"></script>
</body>
</html>